<title>容器管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>容器管理</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">容器列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="teacher-table-page" lay-filter="teacher-page"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="lineBar">
    <a class="layui-btn layui-btn-xs" lay-event="ssh_port_and_pass">端口密码</a>
</script>

<script>
    layui.use(['jquery', 'table'], function(){
        var $ = layui.$, form = layui.form,
            table = layui.table, admin = layui.admin,
            view = layui.view;
        table.render({
            elem: '#teacher-table-page'
            ,url: "/admin/container/list"
            ,method: 'get'
            ,cols: [[
                {field:'id', width:'10%',  title: '容器ID', align: 'center'}
                ,{field:'userID', width:'10%', title:'所属用户ID', align:'center'}
                ,{field:'createdTime', width:'15%', title: '创建时间', align: 'center', templet: function (d) {
                        return time(d.createdTime);
                    }}
                ,{field:'endTime', width:'15%', title:'截止时间', align:'center', templet: function (d) {
                        return time(d.endTime);
                    }}
                ,{field:'status', width:'15%', title:'容器状态', align:'center', templet: function (d) {
                        if (d.status === undefined){
                            return '未启动';
                        }else {
                            switch (d.status) {
                                case 0:
                                    return '已关闭';
                                case 1:
                                    return '运行中';
                                case 2:
                                    return '已删除';
                            }
                        }
                    }}
                ,{align:'center', width:'35%', title:'操作', toolbar:'#lineBar'}
            ]]
            ,page: true
            ,parseData: function(res) {
                return {
                    "status": res.status,
                    "message": res.message,
                    "total": res.data.total,
                    "list": res.data.content
                };
            }
            ,response: {
                statusName: 'status'
                ,statusCode: 200
                ,msgName: 'message'
                ,countName: 'total'
                ,dataName: 'list'
            }
        });
        table.on('tool(teacher-page)', function (obj) {
            switch (obj.event) {
                case 'ssh_port_and_pass':
                    if (obj.data.status !== 1) {
                        showMsg("容器未运行");
                        return;
                    }
                    showMsg("端口：" + obj.data.sshPort + "</br>" + "密码：" + obj.data.sshPassword);
                    break;
            }
        });

    });

    function time(time = +new Date()) {
        var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
        return date.toJSON().substr(0, 19).replace('T', ' ');
    }

    function showMsg(text) {
        layer.msg("<div style=\"padding: 20px 100px;\">"+ text + "</div>", {
            time: 8000, //8s后自动关闭
            btn: ['明白了'],
            shade: 0.3,
            yes: function (index, layero) {
                layer.close(index);
            }
        });
    }
</script>